<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="账号" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
                <el-input v-model="ruleForm.nickName"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="note">
                <el-input v-model="ruleForm.note"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="roleList">
                <el-checkbox-group v-model="ruleForm.roleList">
                    <template v-for="item in roles">
                        <el-checkbox :label="item.id" :key="item.name">{{ item.name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="loading" @click="sub('ruleForm')">确定</el-button>
                <el-button @click="onCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { apiRoleList, apiAdd } from "@/api/admin.js";
export default {
    name: "admin_user_index_add",
    data() {
        return {
            roles: [],
            ruleForm: {
                phone: "",
                nickName: "",
                email: "",
                password: "",
                note: "",
                roleList: [],
            },
            rules: {
                phone: [{ required: true, message: "请输入账号", trigger: "change" }],
                password: [{ required: true, message: "请输入密码", trigger: "change" }],
                roleList: [{ required: true, message: "请选择角色", trigger: "change" }]
            },
            loading: false,
        }
    },
    created() {
        apiRoleList().then(res => {
            this.roles = res.data
        })
    },
    methods: {
        // 确定
        sub(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    const form = this.ruleForm
                    if (form.nickName == '') form.nickName = form.phone
                    // 计算勾选角色
                    let arr = []
                    for (let a = 0; a < form.roleList.length; a++) {
                        const roleId = form.roleList[a]
                        for (let b = 0; b < this.roles.length; b++) {
                            const { id, shortName } = this.roles[b]
                            if (roleId == id) {
                                arr.push({ roleId: id, shortName })
                            }
                        }
                    }
                    form.roleList = arr;
                    // console.log(form);
                    apiAdd(form).then((res) => {
                        this.$message({ message: "操作成功", type: "success" });
                        this.loading = false;
                        this.$emit("onSubmit");
                    }).catch((err) => {
                        this.loading = false;
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 取消
        onCancel() {
            this.loading = false;
            this.$emit("onCancel");
        },
        // 重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
}
</script>

<style></style>